<template>
	<view class="page">
		<view class="my-top">
			<view class="selsecInput flex flex-align">
				<view class="search flex flex-align">
					<tui-icon name="search" color="#999" :size="24"></tui-icon>
				</view>
				<view class="flex flex-align city">
					<view>郑州市</view> 
					<tui-icon name="arrowdown" color="#999" :size="20"></tui-icon>
				</view>
				<input type="text" placeholder="请输入社区名称" />
			</view>
			<view class="address">当前地址</view>
			<view class="addCity">郑州市</view>
			<view class="selectShequ">请选择您的社区</view>
		</view>
		<view class="shequList">
			<view class="title">附近社区</view>
			<view class="list">
				<view class="mendian flex flex-align" v-for="(item,index) in 6" :key="index">
					<view class="left">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="center">
						<view class="titles flex flex-align flex-bt">
							<view class="l">门槛查收</view>
							<view class="r">距离21.4公里</view>
						</view>
						<view class="team">团长：Y-丽丽</view>
						<view class="address">河南省郑州市中牟县青年路街道白沙镇原圃路39号东润城臻园</view>
					</view>
					<view class="right">
						<tui-icon name="arrowright" color="#999" :size="28"></tui-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				longitude:'',
				latitude:''
			};
		},
		onLoad() {
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
		},
		onShow() {
			let that = this
			
		},
	
		methods: {
		
			getdata() {
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.dataInfo = res.data
					}
				}).catch((res) => {

				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	page{
		width: 100%;
		// height: 100%;
		background-color: #fff;
	}
	.my-top{
		position: relative;padding-top: 40rpx;padding-bottom: 140rpx;
		width: 100%;
		
		background: linear-gradient(to left,$base,$base);
		border-radius: 0 0 50% 50% / 0% 0% 20% 20%;
		.selsecInput{background: #fff;border-radius: 60rpx;width: 630rpx;margin: 0 auto;padding: 15rpx 20rpx;
			.city{margin: 0 6rpx;
				view{font-weight: bold;}
			}
		}
		.address{text-align: center;color: #fff;font-size: 28rpx;margin: 40rpx 0;}
		.addCity{text-align: center;color: #fff;font-weight: bold;font-size: 34rpx;}
		.selectShequ{position: absolute;bottom: -50rpx;left: 50%;line-height: 100rpx;text-align: center;background: #fff;border-radius: 100rpx;width: 400rpx;margin-left: -200rpx;font-size: 30rpx;box-shadow:1px 1px 5px 1px #ccc}
	}
	.shequList{margin-top: 100rpx;
		.title{font-weight: bold;font-size: 42rpx;border-left: 4px solid #f20;padding-left: 20rpx;}
		.list{
			.mendian{padding: 30rpx;margin: 30rpx 0;border-bottom: 1px solid #eee;
				.left{margin-right: 20rpx;
					image{width: 150rpx;height: 150rpx;}
				}
				.center{
					.titles{
						.l{font-size: 38rpx;}
						.r{color: #f20;}
					}
					.team{margin: 10rpx 0;color: #999;}
				}
			}
		}
	}
</style>